<template>
  <div class="favorite">
    <!-- 产品收藏 -->
    <el-card class="card">
      <div class="header" slot="header">
        <span class="title">产品</span>
      </div>
      <div class="content" v-if="products.length > 0">
        <el-card class="one-product" v-for="pro,id in products" :key="id" @click.native="toProduct(pro.id)">
          <img v-lazy="pro.url" alt="">
          <div class="text">
            <div class="name"><i class="iconfont icon-nongchanpin icon"></i>{{pro.product_name}}</div> 
            <div><i class="iconfont icon-type icon"></i>{{productTypes[pro.type]}}</div>
            <div class="introduction">
              <i class="el-icon-notebook-2 icon"></i>
              {{pro.introduction}}
            </div>
          </div>
        </el-card>
      </div>
      <div class="title no-collect" v-else>你还没有收藏产品哦~~</div>
    </el-card>

    <!-- 卖家收藏 -->
    <el-card class="card">
      <div class="header" slot="header">
        <span class="title">商家</span>
      </div>
      <div class="content" v-if="suppliers.length > 0">
        <el-card class="one-product" v-for="sup,id in suppliers" :key="id" @click.native="toSupplier(sup.id)">
          <img v-lazy="sup.url" alt="">
          <div class="text">
            <div class="name"><i class="el-icon-house icon"></i>{{sup.supplier_name}}</div>  
            <div><i class="el-icon-location-information icon"></i>{{sup.address}}</div>
            <div class="introduction"> 
              <i class="el-icon-notebook-2 icon"></i>
              {{sup.introduction}}
            </div>
          </div>
        </el-card>
      </div>
      <div class="title no-collect" v-else>你还没有收藏产品哦~~</div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productTypes: this.$global.PRODUCTTYPE,
      products: [],
      suppliers: [],
    };
  },
  methods: {
    toProduct(id) {
      this.$router.push({
        path: '/supplier/product',
        query: {
          pid: id
        }
      })
    },
    toSupplier(id) {
      this.$router.push({
        path: '/supplier',
        query: {
          sid: id
        }
      })
    },
    async load() {
      let all_products = []
      let all_products_photos = []
      let all_supplier = []
      let all_supplier_photos = []
      let purchaser_id = undefined
      await this.$API.getPurchaser().then(res => {
        if (res.status == 200) {
          let aid = this.$store.state.user.account_id
          for (let obj of res.data) {
              if (obj.account_id == aid) {
                purchaser_id = obj.id
                return this.$API.getProductPhotos()
              }
          }
        }
      }).then(res => {
        if (res.status == 200) {
          all_products_photos = res.data
          return this.$API.getSupplier()
        }
      }).then(res => {
        if (res.status == 200) {
          all_supplier = res.data
          return this.$API.getSupplierPhotos()
        }
      }).then(res => {
        if (res.status == 200) {
          all_supplier_photos = res.data
          return this.$API.getSupply()
        }
      }).then(res => {
        if (res.status == 200) {
          all_products = res.data
          return this.$API.getFavorite()
        }
      }).then(res => {
        if (res.status == 200) {
          for (let obj of res.data) {
            if (obj.purchaser_id == purchaser_id) {
              if (obj.product_id) {
                for (let obj2 of all_products) {
                  if (obj2.id == obj.product_id) {
                    this.products.push(obj2)
                  }
                }
                for (let obj2 of this.products) {
                  for (let pho of all_products_photos) {
                    if (obj2.id == pho.product_id) {
                      obj2['url'] = pho.photo_url
                      break
                    }
                  }
                }
              } else {
                for (let obj2 of all_supplier) {
                  if (obj2.id == obj.supplier_id) {
                    this.suppliers.push(obj2)
                  }
                }
                for (let obj2 of this.suppliers) {
                  for (let pho of all_supplier_photos) {
                    if (obj2.id == pho.supplier_id) {
                      obj2['url'] = pho.photo_url
                      break
                    }
                  }
                }
              }
            }
          }
        }
      })
    }
  },
  created() {
    this.load()
  }
};
</script>
<style lang="less" scoped>
.card{
  padding: 20px;
  margin-bottom: 20px;
}
.header{
  color: @color-theme;
}
.title{
  font-size: 1.5rem;
}
.no-collect{
  text-align: center;
  color: @color-tips;
}
/deep/ .el-card.card{
  padding-bottom: 0;
}
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .one-product{
    max-width: 380px;
    margin-bottom: 20px;
    user-select: none;
    &:hover{
      // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);;
      box-shadow: 0 2px 12px 0 @color-theme;
    }
    /deep/ .el-card__body{
      display: flex;
    }
    img{
      height: 100px;
    }
    .text {
      margin-left: 10px;
      line-height: 1.6;
      .icon{
        color: @color-theme;
        margin-right: 5px;
      }
      .name{
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .introduction{
        display: -webkit-box;
        width: 200px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
  }
  }
}
</style>